<!-- 首页里的关注页面-->
<template>
  <div id="homeFollow">
    <div class="content_left_box">
      <!-- 左边头部 -->
      <div class="left_head_box">
        <router-link to="/home/recommend" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p">推荐</span></div></router-link>
        <router-link to="/home/follow" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectStyle">关注</span></div></router-link>
        <router-link to="/home/hotList" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p">热榜</span></div></router-link>
      </div>
      <!-- 左边内容切换 -->
      <div class="left_body_box">
        <!-- 用户没有关注 提示框 -->
        <div class="card_box_tips" v-if="!isHaveFollow">
          <img src="../../assets/write_article.png" alt="" class="card_box_tips_img">
          <div class="card_box_tips_text">还没有关注的人，为你推荐以下用户</div>
        </div>
        <HomeFollowCardBox v-for="(i, index) in (!isHaveFollow?list:followList)" :key="index" :cardList="i" :isHaveFollow="isHaveFollow" @changeIsHaveFollow="changeIsHaveFollow"></HomeFollowCardBox>
      </div>
    </div>
  </div>
</template>

<script>
import HomeFollowCardBox from './homeCard/HomeFollowCardBox'
export default {
  name: 'homeFollow',
  components: {
    'HomeFollowCardBox': HomeFollowCardBox
  },
  data () {
    return {
      isHaveFollow: false,
      selectStyle: {'color': '#0084ff'},
      list: [
        { 'id': 1, 'username': '小明', 'sign': '我是很帅的小明！', 'occupation': '自由职业', 'title': '母猪上树', 'content': '传说，有一只母猪，它心性骄傲，不甘沦为一头生殖工具，为此她努力锻炼，开始了它的爬树生涯！', 'isImage': true, 'imageUrl': '', 'followNum': 99, 'answerNum': 999, 'contentNum': 1567, 'isFollow': false },
        { 'id': 2, 'username': '小红', 'sign': '加微信: VX1234', 'occupation': '京北大学在校生', 'title': '公鸡下蛋', 'content': '内容', 'isImage': false, 'imageUrl': '', 'followNum': 5032, 'answerNum': 101, 'contentNum': 800, 'isFollow': false },
        { 'id': 3, 'username': '小绿', 'sign': '进我主页，很嗨哦！', 'occupation': '华清大学教授', 'title': '下蛋公鸡', 'content': '内容', 'isImage': true, 'imageUrl': '', 'followNum': 10, 'answerNum': 1091, 'contentNum': 800, 'isFollow': false },
        { 'id': 4, 'username': '小蓝', 'sign': '给我点个关注，谢谢老铁！', 'occupation': '逗鱼一姐', 'title': '公鸡中的', 'content': '内容', 'isImage': true, 'imageUrl': '', 'followNum': 1999, 'answerNum': 11, 'contentNum': 800, 'isFollow': false },
        { 'id': 5, 'username': '小紫', 'sign': '晚上7点直播，不见不散！', 'occupation': '英雄联盟职业选手', 'title': '战斗机', 'content': '内容', 'isImage': true, 'imageUrl': '', 'followNum': 10, 'answerNum': 99, 'contentNum': 800, 'isFollow': false },
        { 'id': 6, 'username': '小黑', 'sign': '我比小明更帅！', 'occupation': '城管大队副队长', 'title': '哦耶!', 'content': '内容', 'isImage': false, 'imageUrl': '', 'followNum': 10, 'answerNum': 1, 'contentNum': 800, 'isFollow': false }
      ],
      followList: [
        { 'id': 1, 'username': '小明', 'sign': '我是很帅的小明！', 'occupation': '自由职业', 'title': '母猪上树', 'content': '传说，有一只母猪，它心性骄傲，不甘沦为一头生殖工具，为此她努力锻炼，开始了它的爬树生涯！', 'isImage': true, 'imageUrl': '', 'followNum': 99, 'answerNum': 999, 'contentNum': 1567, 'isFollow': false, 'commentNum': 108, 'isFollowQuestion': false },
        { 'id': 1, 'username': '小明', 'sign': '加微信: VX1234', 'occupation': '京北大学在校生', 'title': '公鸡下蛋', 'content': '内容', 'isImage': false, 'imageUrl': '', 'followNum': 5032, 'answerNum': 101, 'contentNum': 800, 'isFollow': false, 'commentNum': 99, 'isFollowQuestion': false },
        { 'id': 1, 'username': '小明', 'sign': '进我主页，很嗨哦！', 'occupation': '华清大学教授', 'title': '下蛋公鸡', 'content': '内容', 'isImage': true, 'imageUrl': '', 'followNum': 10, 'answerNum': 1091, 'contentNum': 800, 'isFollow': false, 'commentNum': 19, 'isFollowQuestion': false },
        { 'id': 1, 'username': '小明', 'sign': '给我点个关注，谢谢老铁！', 'occupation': '逗鱼一姐', 'title': '公鸡中的', 'content': '内容', 'isImage': true, 'imageUrl': '', 'followNum': 1999, 'answerNum': 11, 'contentNum': 800, 'isFollow': false, 'commentNum': 39, 'isFollowQuestion': false },
        { 'id': 1, 'username': '小明', 'sign': '晚上7点直播，不见不散！', 'occupation': '英雄联盟职业选手', 'title': '战斗机', 'content': '内容', 'isImage': true, 'imageUrl': '', 'followNum': 10, 'answerNum': 99, 'contentNum': 800, 'isFollow': false, 'commentNum': 19, 'isFollowQuestion': false },
        { 'id': 1, 'username': '小明', 'sign': '我比小明更帅！', 'occupation': '城管大队副队长', 'title': '哦耶!', 'content': '内容', 'isImage': false, 'imageUrl': '', 'followNum': 10, 'answerNum': 1, 'contentNum': 800, 'isFollow': false, 'commentNum': 99, 'isFollowQuestion': false }
      ]
    }
  },
  computed: {
  },
  methods: {
    changeIsHaveFollow (data) {
      this.isHaveFollow = data
    }
  }
}
</script>

<style scoped>
  /*@import 'xxx.css';*/
  #homeFollow{
  }

  .card_box_tips{
    height: 160px;
    width: 100%;
    background-color: white;
    border-bottom: 1px solid #f0f2f7;
    padding: 15px 20px 15px 20px;
    display: inline-block;
    text-align: center;
    animation: flipInX 1s ease-in;
  }

  .card_box_tips_img{
    height: 80px;
    width: 80px;
    margin-top: 5px;
    margin-bottom: 10px;
  }

  .card_box_tips_text{
    font-size: 15px;
    color: grey;
  }

  .content_left_box{
    width: 695px;
    height: 100%;
    background-color: white;
    float: left;
    box-shadow: 0 1px 3px rgba(26,26,26,.1);
  }

  .left_head_box{
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #f0f2f7;
  }

  .head_btn_box_link{
    width: auto;
    height: 100%;
    float: left;
    margin-right: 20px;
    margin-left: 22px;
  }

  .head_btn_box{
    color: #1a1a1a;
    font-size: 16px;
    text-align: center;
    line-height: 60px;
  }

  .head_btn_box_link:hover .head_btn_box_p{
    color: #175199;
  }

  .left_body_box{
    height: auto;
    width: 100%;
    display: inline-block;
    animation: zoomIn 0.5s ease-in;
  }
</style>
